<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/axios.min.js"></script>
		<script type="text/javascript" src="../static/global.js"></script>
		<script type="text/javascript" src="../elements/element.js"></script>
		<link href="../elements/element.css" rel="stylesheet" />
		
		<link href="../css/hmstyle.css" rel="stylesheet" type="text/css" />
		<link href="../css/skin.css" rel="stylesheet" type="text/css" />
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
		<script type="text/javascript" src="../seckillJs/js/banner.js"></script>
		<script type="text/javascript" src="../seckillJs/js/ad.js"></script>
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="../css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>

	</head>

	<body>
		<div id="shopcartID">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd">
							<a href="#" target="_top" class="h">亲，请登录</a>
							<a href="#" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
						</div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
								 id="J_MiniCartNum" class="h">0</strong></a>
						</div>
					</div>
					<div class="topMessage favorite">
						<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
						</div>
				</ul>
			</div>





			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logo"><img src="../images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="../images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">

								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<tr class="item-list">
						<div class="bundle  bundle-last ">
							<div class="bundle-hd">
								<div class="bd-promos">
									<div class="bd-has-promo">已享优惠:<span class="bd-has-promo-content">省￥19.50</span>&nbsp;&nbsp;
									</div>
									<div class="act-promo">
										<a href="#" target="_blank">第二支半价，第三支免费<span class="gt">&gt;&gt;</span></a>
									</div>
									<span class="list-change theme-login">编辑</span>
								</div>
							</div>
							<div class="clear"></div>
							<div class="bundle-main">
								<!--                        遍历SKU商品的存在-->
								<ul v-for="items in Cartitems" class="item-content clearfix">
									<li class="td td-chk">
										<div class="cart-checkbox ">
											<el-checkbox-group v-model="checkListids">
												<el-checkbox @change="handleCheckedChange($event,items.skuId)" :label="items.skuId"><br /></el-checkbox>
											</el-checkbox-group>
											<!--                                    <el-checkbox  @change="handleCheckedChange($event,items.skuId)"  :checked=items.check></el-checkbox>-->
											<!--                                    <input class="check" id="J_CheckBox_170037950254" name="items[]"-->
											<!--                                           value="170037950254" type="checkbox">-->
											<!--                                    <label for="J_CheckBox_170037950254"></label>-->
										</div>
									</li>
									<li class="td td-item">
										<div class="item-pic">
											<a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆" class="J_MakePoint" data-point="tbcart.8.12">
												<img src="../images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg"></a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" class="item-title J_MakePoint" data-point="tbcart.8.11">{{items.name}}</a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props item-props-can">
											<span class="sku-line">{{items.skuAttr}}</span>
											<!--                                    <span class="sku-line">包装：裸装</span>-->
											<span tabindex="0" class="btn-edit-sku theme-login">修改</span>
											<i class="theme-login am-icon-sort-desc"></i>
										</div>
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">78.00</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">{{items.price.toFixed(2)}}</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="amount-wrapper ">
											<div class="item-amount ">
												<div class="sl">
													<input @click="smallbtn(items.skuId)" class="smallbtn min am-btn" name="" type="button" value="-" />
													<input class="Items_Nums text_box" type="text" v-bind:value="items.count"  style="width:30px;" />
													<input class="bigbtn add am-btn" name="" type="button" value="+" />
												</div>
											</div>
										</div>
									</li>
									<li class="td td-sum">
										<div class="td-inner">
											<em tabindex="0" class="J_ItemSum number"><span style="color:red;">¥ </span>{{items.totalPrice.toFixed(2)}}</em>
										</div>
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<a title="移入收藏夹" class="btn-fav" href="#">
												移入收藏夹</a>
											<el-button type="text" @click="deleteCart(items.skuId)">删除</el-button>
											<!--                                    <a href="javascript:;" @click="deleteCart(items.skuId)" data-point-url="#" class="delete">-->
											<!--                                        删除</a>-->
										</div>
									</li>
								</ul>
							</div>
						</div>
					</tr>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

				<div class="float-bar-wrapper">
					<div id="J_SelectAll2" class="select-all J_SelectAll">
						<span></span>
						<div class="cart-checkbox">
							<!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox> -->
							<!--                    <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">-->
							<!--                    <label for="J_SelectAllCbx2"></label>-->
						</div>
						<span>全选</span>
					</div>
					<div class="operations">
						<a href="#" hidefocus="true" class="deleteAll">删除</a>
						<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
					</div>
					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">0.00</em></strong>
						</div>
						<div class="btn-area">
							<a href="#" @click="J_Go()" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
								<span>结&nbsp;算</span></a>
						</div>
					</div>

				</div>

				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有</em>
						</p>
					</div>
				</div>

			</div>

			<!--操作页面-->

			<div class="theme-popover-mask"></div>

			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="../images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

					</form>
				</div>
			</div>
			<!--引导 -->
			<div class="navCir">
				<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
				<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
				<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
				<li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#shopcartID",
			data: {
				checkAll: false,
				isIndeterminate: true,
				Cartitems: [], //购物车商品
				checkids: [],
				checkListids: [],
				NumId:[]
			},
			created: function() {
				this.getShopCarts();
			},
			methods: {
				//获取当前用户所有购物项的方法
				getShopCarts() {
					//解决前端跨域传数据到后台不携带cookie值的
					axios.defaults.withCredentials = true
					axios.get(glodate.serverZuul + "cart/getCarts").then((res) => {
						console.log(res);
						// console.log(res.data.items[0].check);
						this.Cartitems = res.data.items

						for (let i = 0; i <= this.Cartitems.length; i++) {
							// this.checkids.push(this.Cartitems[i].check);
							if (this.Cartitems[i].check == true) {
								this.checkListids.push(this.Cartitems[i].skuId)
							}
						}
						console.log(this.checkListids)


					})
				}, //删除商品
				deleteCart(skuId) {
					console.log(skuId)
					this.$confirm('确认删除此商品, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios({
							method: "delete",
							url: glodate.serverZuul + "cart/deleteCarts?skuId=" + skuId
						}).then((res) => {
							console.log(res)
							if (res.data.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								window.location.href = glodate.pre + "home/shopcart.html"
							} else {
								this.$message({
									type: 'info',
									message: '删除失败!'
								});
							}
						})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				}, //获取checked的选中状态修改
				handleCheckedChange: function(val, skuId) {
					$.ajax({
						url: glodate.serverZuul + "cart/cartUpChecked",
						method: 'get',
						data: {
							"skuId": skuId,
							"check": val
						},
						// 允许携带证书
						xhrFields: {
							withCredentials: true
						},
						// 允许跨域
						crossDomain: true,
						success: (res => {
							console.log(res.data);
						})
					})
				}, //获取是否全部选中
				handleCheckAllChange(val) {
					console.log(val)
					this.checkListids.length = val.length ? cityOptions : [];
					this.isIndeterminate = false;

				},
				smallbtn(skuId){
					alert(this.NumId);	
					// var num = $(this).parents("ul").find(".Items_Nums").html();
					// // let num = $(".Items_Nums").text();
					// console.log(num);
					// var num1 = parseInt(num) - 1 //加减数量框
				},//加入结算时先进行判断是否登录
				J_Go() {
					$.ajax({
						url: glodate.serverZuul + "orderweb/getLoginStatus",
						type: "get",
						// 允许携带证书
						xhrFields: {
							withCredentials: true
						},
						// 允许跨域
						crossDomain: true,
						success: (res => {
							console.log(res);
							if (res.code == 200) {
								$.ajax({
									url: glodate.serverZuul + "orderweb/confirmOrder",
									type: "get",
									// 允许携带证书
									xhrFields: {
										withCredentials: true
									},
									// 允许跨域
									crossDomain: true,
									success:(res=>{
										console.log(res);
										if(res.code == 200){
											window.location.href = glodate.pre + "home/pay.html"
										}else{
											this.$message({
												type: 'info',
												message: '請選擇商品'
											});
										}
									})
								})
								
								
								
							}else{
								alert("跳转登录页面");
								window.location.href = glodate.pre + "home/login.html"
								}

						})
					})
				}

			}


		})
	</script>

	<script>
		
		layui.use(['layer'],function(){
			
		
		//当点击减号按钮的时候进行计算并发送到后台来修改数量的数据
		$(".smallbtn").on('click', function() {
			console.log(1);
			alert(1);
			
			var num1 = parseInt(num) - 1 //加减数量框
			// var price=$(this).parents("ul").find(".price").html();//价钱
			// var money=$(this).parents("ul").find(".money").html(price*num1);//金钱
			// var pro_id=$(this).parents("ul").find(".pro_id").val();//商品
			// $.post('../updateCar',{
			//  'num':num1,
			//  'pro_id':pro_id
			// },function(res){

			// })
		})
		//当点击加号按钮的时候进行计算并发送到后台来修改数量的数据
		$('.bigbtn').on('click', function() {
			alert(1);
			// var num=  $(this).parents("ul").find(".num").val();
			// var num1=parseInt(num)+1
			//    var price=$(this).parents("ul").find(".price").html();
			//    var money=$(this).parents("ul").find(".money").html(price*num1);
			//    var pro_id=$(this).parents("ul").find(".pro_id").val();
			//    $.post('../updateCar',{
			//  	  'num':num1,
			//  	  'pro_id':pro_id
			//    },function(res){

			//    })

		})
		
		
		
		
		})
	</script>

</html>
